import React from 'react';
import { Select, Carousel } from 'antd';
import { WeaErrorPage, WeaTools, WeaSelect ,WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const Option = Select.Option;
import { isEqual, isEmpty } from 'lodash';
import { openLinkUrl } from '../../util/common';
//期刊中心
class MagazineCom extends React.Component {
	render() {
		const { eid, data, esetting } = this.props;
		return <table id={`_contenttable_${eid}`} className="Econtent"  width="100%" cellPadding='0' cellSpacing='0'>
			   <tr>	
				<td width="1px"></td>
				 <td width='*' className="valign">
					<table width="100%"  cellPadding='0' cellSpacing='0'>
					{data.map((item, index) => <MagazineItem ecId={`${this && this.props && this.props.ecId || ''}_MagazineItem@as1gjz@${index}`} item={item} esetting={esetting}/>)}
					</table>
				</td>    
				<td width="1px"></td>
			  </tr>
			</table>
	}
}
class MagazineItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            linkUrl: ''
        };
        this.handleChange = this.handleChange.bind(this);
    }
	handleChange(key, value, list = []) {
        list.map(item => {
            if(item.id == key) {
                this.setState({
                    linkUrl: item.link,
                });
            }
        });
	}
    componentWillMount(){
        const { item } = this.props;
        const {  list = [] } = item;
    	if(list.length > 0){
			this.setState({
                linkUrl: list[0].link
			})
        }
    }
	render() {
        const { item = {}, esetting } = this.props;
        const { width, height, linkmode } = esetting;
        const {  docsubject = {} , summary= '', images=[], list = [] } = item;
        const { link, name } = docsubject;
		let strImg = '/images/go_wev8.gif';
        const style = {tableLayout:'fixed'};
        const tstyle = {tableLayout:'fixed',paddingBottom:'15px',paddingLeft: '3px'};
        let imgstyle = { width: width };
        if(height !== '0'){
            imgstyle.height = height;
        }
        let imghtml = null;
        let imghtml1=[];
        let j=0;
        if (!isEmpty(images)){
            if (images.length > 1) {
                images.map((item,i)=>{
                    if(images[i]!= '/images/homepage/noimgdefault_wev8.jpg'){
                       imghtml1[j]=images[i];
                       j++;
                    }
                })
                if(imghtml1.length==0){
                    imghtml1=[ '/images/homepage/noimgdefault_wev8.jpg'];
                }
                let ihtml = imghtml1.map((item, i) => {
                    let img = imghtml1[i];
                    if(!img) img = '/images/homepage/noimgdefault_wev8.jpg';
                    if (img.indexOf("|") !== -1) img = img.split("|")[0];
                    return <div><ImgCom ecId={`${this && this.props && this.props.ecId || ''}_ImgCom@mc5dkn@${i}`} link={img != '/images/homepage/noimgdefault_wev8.jpg'  && list[i] && list[i].docsubject && list[i].docsubject.link} style={{width: '100%', height: '100%'}} src={img}/></div>
                });
                imghtml = <td className="valign" width={parseInt(width)+5}><div className="news-silde" style={{marginBottom: '10px'}}>
                    <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@y7gf6a`} autoplay>
                        {ihtml}
                    </Carousel>
				</div></td>
            }else{
                let img = images[0];
                if(!img) img = '/images/homepage/noimgdefault_wev8.jpg';
                if (img.indexOf("|") !== -1) img = img.split("|")[0];
                imghtml = <td className="valign" width={parseInt(width)+5}><div style={{height: '100%', marginBottom: '10px'}} className='news-silde'>
                    <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@nfvilj`}>
                        <div><ImgCom ecId={`${this && this.props && this.props.ecId || ''}_ImgCom@xth6vb`} link={img != '/images/homepage/noimgdefault_wev8.jpg' && list[0] && list[0].docsubject && list[0].docsubject.link} style={{width: '100%',
                            height: '100%'}} src={img}/></div>
                    </Carousel>
				</div></td>
            }
        }else{
            let img = '/images/homepage/noimgdefault_wev8.jpg';
            imghtml = <td className="valign" width={parseInt(width)+5}><div style={{height: '100%', marginBottom: '10px'}} className='news-silde'>
                <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@fcc7zy`}>
                    <div><ImgCom ecId={`${this && this.props && this.props.ecId || ''}_ImgCom@5cn9b0`} style={{width: '100%',
                        height: '100%'}} src={img}/></div>
                </Carousel>
            </div></td>
		}
        return <tr>
				<td>
				<table width="100%" className="valign" style={style} >
				<tr>
					{imghtml}
					<td  width="*" className="valign">
						<table width="100%" className="magzine" style={tstyle}>
						<tr>
							<td><a href="javascript:void(0);" style={{color:'#666'}} onClick={openLinkUrl.bind(this,link,linkmode)}>{name}</a></td>
						</tr>
						<tr className='sparator' style={{height:'1px'}}><td style={{padding:'0px'}}></td></tr>
						<tr>
							<td style={{width: '99%', overflow: 'hidden', textOverflow: 'ellipsis', WebkitLineClamp: 2, webkitBoxOrient: 'vertical', display: '-webkit-box'}}>{summary}</td>
						</tr>
						</table>
						<table  width="100%" cellPadding='0' cellSpacing='0' style={tstyle}>
						<tr>
							<td><WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@5px8d9`}
									style={{width: '90%'}}
									options={list.map((item,index) => {
                                        let arr = {key: item.id, showname: item.name};
										if(index == 0){
                                            arr = {key: item.id, showname: item.name, selected: true};
										}
										return arr;
									})}
                                    onChange={(key, value) => this.handleChange(key, value, list)}
                                // hasAddBtn
                                // options={options}
                                // viewAttr={viewAttr}
                                // value={value}
                                // onSelectRepeat={(v=>{console.log('onSelectRepeat', v)})}
                                // onChange={this.handleChange.bind(this)}
                            />&nbsp;
			        		<a href="javascript:void(0);" onClick={openLinkUrl.bind(this,this.state.linkUrl,linkmode)}>
				        		<img style={{marginBottom:'-5px'}} src={strImg}/>
				        	</a>
			        	</td>
						</tr>
						</table>
					</td>
				</tr>
				</table>
			</td>
		</tr>
	}
}
class ImgCom extends React.Component {
    constructor(props) {
        super(props);
        this.aClick = this.aClick.bind(this);
    }
    aClick () {
        const { link = ''} = this.props;
        if(link != ''){
            window.open(link);
        }else return false;
    }
    render() {
        const {src = '', style = {width: '100%', height: '100%'}} = this.props;
        return (
            <a href="javascript:void(0)" onClick={this.aClick}>
                <img alt="" style={style} src={src}/>
            </a>
        );
    }
}
class MyErrorHandler extends React.Component {
	render() {
		const hasErrorMsg = this.props.error && this.props.error !== "";
		return (
			<WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@dor2n4`} msg={hasErrorMsg?this.props.error:getLabel(385218,"对不起，该页面异常，请联系管理员！")} />
		);
	}
}
MagazineCom = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(MagazineCom);
export default MagazineCom;